<!--
 * @Description: 学习视频类目
 * @Author: liyujie
 * @Date: 2021/10/16
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/10/16
-->
<template>
    <PageLayout title="课程目录管理">
        <template slot="filter">
            <div class="left">
                <div class="filter-item">
                    <el-input
                        placeholder="请输入目录名称"
                        v-model="filterData.keyword"
                        suffix-icon="el-icon-search"
                        clearable
                        style="width: 332px"
                        size="medium"
                        @change="getTableData(1)"
                        @keydown.enter.native="getTableData(1)"
                    />
                </div>
                <div class="filter-item">
                    <div class="filter-item__title">上架状态</div>
                    <el-select
                        v-model="filterData.type_status"
                        filterable
                        style="width: 152px"
                        size="medium"
                        @change="getTableData(1)"
                    >
                        <el-option
                            label="全部"
                            :value="99"
                        />
                        <el-option
                            label="上架"
                            :value="1"
                        />
                        <el-option
                            label="下架"
                            :value="0"
                        />
                    </el-select>
                </div>
            </div>
            <div class="right">
                <el-button
                    type="primary"
                    size="small"
                    class="custom-button delete-button"
                    @click="handleDelete"
                >
                    删除
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    class="custom-button move-button"
                    @click="handleMove"
                >
                    移动目录
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    @click="addType"
                >
                    添加目录
                </el-button>
            </div>
        </template>
        <div
            class="type-wrapper"
            v-loading="tableLoading"
        >
            <div
                class="type-item"
                v-for="row in tableData"
                :key="row.type_no"
            >
                <!-- 一级显示内容行 -->
                <div
                    class="type-item-content"
                    :class="{'collapse': row.collapse}"
                    @click="handleCollapse(row)"
                >
                    <div class="col-item type-item-name">
                        <div
                            v-show="row.isEdit"
                            class="edit"
                        >
                            <el-input
                                v-model="row.type_name"
                                size="medium"
                                style="width: 228px"
                                clearable
                                @click.native.stop
                            />
                            <div
                                class="save"
                                @click.stop="saveTypeName(row)"
                            >
                                <i class="el-icon-success"/>
                                <span>保存</span>
                            </div>
                            <div
                                class="cancel"
                                @click.stop="cancelEdit(row)"
                            >
                                <i class="el-icon-error"/>
                                <span>取消</span>
                            </div>
                        </div>
                        <div
                            v-show="!row.isEdit"
                            class="no-edit"
                        >
                            <span>{{ row.type_name }}</span>
                            <i
                                class="el-icon-edit"
                                @click.stop="setEditStatus(row)"
                            />
                        </div>
                    </div>
                    <div class="col-item sub-count">
                        {{ row.sub_type_count }}个二级目录
                    </div>
                    <div class="col-item video-count">
                        {{ row.course_num }}个学习视频
                    </div>
                    <div class="col-item status">
                        <el-switch
                            v-model="row.type_status"
                            :active-value="1"
                            :inactive-value="0"
                            style="margin-right: 8px"
                            @click.native.stop
                            @change="setStatus(row)"
                        />
                        已{{ row.type_status ? '上' : '下' }}架
                    </div>
                    <div class="col-item option-view">
                        <div
                            class="add-sub-type"
                            @click.stop="addSubType(row)"
                        >
                            <i class="el-icon-plus"/>
                            <span>添加子目录</span>
                        </div>
                        <div class="arrow">
                            <i
                                class="el-icon-caret-bottom"
                                :class="row.collapse ? 'right' : 'bottom'"
                            />
                        </div>
                    </div>
                </div>
                <!-- 二级面板 -->
                <el-checkbox-group
                    v-model="multipleSelection"
                    class="sub-type-wrapper"
                    :class="{'collapse': row.collapse, 'empty-wrapper': !row.sub_type_list.length }"
                    v-loading="row.loading"
                >
                    <template v-if="row.sub_type_list.length">
                        <div class="blank"/>
                        <div
                            class="sub-type-item"
                            v-for="item in row.sub_type_list"
                            :key="item.type_no"
                            :class="{active: multipleSelection.includes(item)}"
                            @click="selectSubType(item)"
                        >
                            <div class="sub-type-item-content">
                                <div class="col-item type-name">
                                    <el-checkbox
                                        :label="item"
                                        class="checkbox"
                                        style="margin-right: 22px;"
                                        :disabled="item.isNew"
                                        @click.native.stop
                                    >
                                        <br>
                                    </el-checkbox>
                                    <div
                                        v-show="item.isEdit"
                                        class="edit"
                                    >
                                        <el-input
                                            v-model="item.type_name"
                                            size="medium"
                                            style="width: 186px"
                                            clearable
                                            @click.native.stop
                                        />
                                        <div
                                            class="save"
                                            @click.stop="saveSubTypeName(item, row)"
                                        >
                                            <i class="el-icon-success"/>
                                            <span>保存</span>
                                        </div>
                                        <div
                                            class="cancel"
                                            @click.stop="cancelSubEdit(item, row)"
                                        >
                                            <i class="el-icon-error"/>
                                            <span>取消</span>
                                        </div>
                                    </div>
                                    <div
                                        v-show="!item.isEdit"
                                        class="no-edit"
                                    >
                                        <span>{{ item.type_name }}</span>
                                        <i
                                            class="el-icon-edit"
                                            @click.stop="setEditStatus(item)"
                                        />
                                    </div>
                                </div>
                                <div class="col-item video-count">
                                    {{ item.course_num }}个学习视频
                                </div>
                                <div class="col-item status">
                                    <el-switch
                                        v-model="item.type_status"
                                        :active-value="1"
                                        :inactive-value="0"
                                        style="margin: 0 8px 0 11.2%"
                                        @click.native.stop
                                        @change="setStatus(item)"
                                    />
                                    已{{ item.type_status ? '上' : '下' }}架
                                </div>
                                <div class="col-item other"/>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="empty">
                            暂无数据
                        </div>
                    </template>
                </el-checkbox-group>
            </div>
        </div>
    </PageLayout>
</template>

<script>
import {selectTypeDialog} from '@/components/study-course/select-type';
import {addCourseTypeDialog} from '@/components/study-course/add-course-type';
export default {
    name: 'StudyCourseListCategory',
    data() {
        return {
            filterData: {
                keyword: '',
                type_status: 99
            },
            tableLoading: false,
            tableData: [],
            multipleSelection: [],
            authResult: {}
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * 初始化
         */
        init() {
            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '学习'}, {title: '课程目录管理'}]);
            this.getTableData();
            this.authResult = this.$route.meta.authResult;
        },

        /**
         * @description 获取一级列表数据
         * @param page
         */
        getTableData(page) {
            this.tableLoading = true;
            let params = {...this.filterData};

            this.$post('/student/course_type%5Cget_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.tableData.forEach(item => {
                        item.name_origin = item.type_name;
                        this.$set(item, 'collapse', true);
                        this.$set(item, 'isEdit', false);
                        this.$set(item, 'loading', false);
                        this.$set(item, 'sub_type_list', []);
                    });
                    this.multipleSelection = [];
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 保存编辑
         * @param row
         */
        saveTypeName(row) {
            row.loading = true;
            let params = {
                type_no: row.type_no,
                type_name: row.type_name
            };

            this.$post('/student/course_type%5Csave', params, res => {
                if (res.code === 1) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '修改成功'
                    });
                    row.isEdit = false;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
                row.loading = false;
            });
        },

        /**
         * @description 二级保存编辑
         * @param row
         * @param item
         */
        saveSubTypeName(item, row) {
            row.loading = true;
            let params = {
                type_no: item.type_no,
                type_name: item.type_name,
                parent_type_no: row.type_no
            };

            this.$post('/student/course_type%5Csave_sub', params, res => {
                if (res.code === 1) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '修改成功'
                    });
                    item.isEdit = false;
                    item.isNew = false;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
                row.loading = false;
            });
        },

        /**
         * 展开折叠获取二级分类
         * @param row
         * @param type
         */
        handleCollapse(row, type) {
            if(type === 'add') {
                row.collapse = false;
            } else {
                row.collapse = !row.collapse;
            }
            if(row.sub_type_list.length) {
                return;
            }
            row.loading = true;
            let params = {
                type_no: row.type_no
            };

            return new Promise((resolve, reject) => {
                this.$post('/student/course_type%5Cget_list_sub', params, res => {
                    if (res.code === 1) {
                        row.sub_type_list = res.data.list;
                        row.sub_type_list.forEach(item => {
                            item.name_origin = item.type_name;
                            this.$set(item, 'isEdit', false);
                            this.$set(item, 'isNew', false);
                        });
                        resolve(res.data.list);
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: res.msg
                        });
                    }
                    row.loading = false;
                });
            });
        },

        /**
         * 设置编辑状态
         * @param row
         */
        setEditStatus(row) {
            if(!this.authResult.auth_edit) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            row.name_origin = row.type_name;
            row.isEdit = true;
        },

        /**
         * 取消编辑状态
         * @param row
         */
        cancelEdit(row) {
            row.type_name = row.name_origin;
            row.isEdit = false;
        },

        /**
         * 取消二级编辑状态
         * @param item
         * @param row
         */
        cancelSubEdit(item, row) {
            if(item.isNew) {
                row.sub_type_list.splice(row.sub_type_list.indexOf(item), 1);
            }
            item.type_name = item.name_origin;
            item.isEdit = false;
        },

        /**
         * 添加子目录
         * @param row
         */
        async addSubType(row) {
            await this.handleCollapse(row, 'add');
            row.sub_type_list.unshift({
                type_no: '',
                parent_type_no: row.type_no,
                type_name: '',
                course_num: 0,
                isEdit: true,
                isNew: true
            });
        },

        /**
         * 选中每一项二级分类
         * @param item
         */
        selectSubType(item) {
            if(this.multipleSelection.includes(item)) {
                this.multipleSelection.splice(this.multipleSelection.indexOf(item), 1);
            } else {
                this.multipleSelection.push(item);
            }
        },

        /**
         * 删除操作
         */
        handleDelete() {
            if(!this.authResult.auth_delete) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            // 未选择分类
            if(!this.multipleSelection.length) {
                this.$message.warning('未选择任何分类');
                return;
            }
            // 存在视频不允许删除
            /*if(this.multipleSelection.find(item => {
                return item.course_num !== 0;
            })) {
                this.$zdConfirm('当前目录下有课程视频，不可删除', '温馨提示', {
                    confirmButtonText: '我知道了',
                    cancelButtonText: '取消',
                    hasCancelButton: false,
                    type: 'warning'
                });
                return;
            }*/
            this.$zdConfirm('是否确认删除当前选中目录', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    type_nos: this.multipleSelection.map(item => {
                        return item.type_no;
                    }).join()
                };

                this.$post('/student/course_type%5Cdelete_batch', params, res => {
                    if (res.code === 1) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '删除成功'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            }).catch(() => {});
        },

        /**
         * 移动分类
         */
        async handleMove() {
            if(!this.authResult.auth_move) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            if(!this.multipleSelection.length) {
                this.$message.warning('未选择任何分类');
                return;
            }
            let parent_type_no = await selectTypeDialog({
                typeList: this.tableData,
                title: '移动'
            });

            if(!parent_type_no) return;
            let params = {
                type_nos: this.multipleSelection.map(item => {
                    return item.type_no;
                }).join(),
                parent_type_no
            };

            this.$post('/student/course_type%5Cmove_type', params, res => {
                if (res.code === 1) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '操作成功'
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
            });
        },

        /**
         * 添加一级分类
         */
        async addType() {
            if(!this.authResult.auth_add) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            let type_name = await addCourseTypeDialog();

            if(type_name) {
                let params = {
                    type_name
                };

                this.$post('/student/course_type%5Csave', params, res => {
                    if (res.code === 1) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '添加成功'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            }
        },

        /**
         * 设置分类状态
         * @param row
         */
        setStatus(row) {
            let params = {
                type_no: row.type_no,
                type_status: row.type_status
            };

            this.$post('/student/course_type%5Cmodify', params, res => {
                if (res.code === 1) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '操作成功'
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                    row.type_status = row.type_status ? 0 : 1;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
/deep/ .filter-wrapper {
    justify-content: space-between;
    padding: 0 32px !important;
    .left {
        display: flex;
    }

    .right {
        margin-top: -24px;

        .custom-button {
            width: 84px;
            height: 36px;
            background: #FFFFFF;
            border-radius: 4px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            margin-right: 12px;
        }

        .move-button {
            border: 1px solid #1890FF;
            color: #1890FF;
        }

        .delete-button {
            border: 1px solid #F95B56;
            color: #F95B56;
        }
    }
}

/deep/ .table-wrapper {
    padding: 0 32px !important;
}

.type-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 6px;
    }

    .type-item {
        background: #FFFFFF;
        margin-bottom: 24px;

        &-content {
            height: 86px;
            padding: 0 32px 0 50px;
            border: 1px solid #E0E6F1;
            transition: background-color .3s;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 4px 4px 0 0;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;

            &.collapse {
                border-radius: 4px;
            }

            &:hover {
                background: #FAFAFA;
            }
            .col-item {
                flex: 1;
            }

            .type-item-name {
                flex: none;
                width: 33%;
                .edit {
                    display: flex;
                    align-items: center;
                    font-weight: 400;

                    .save {
                        margin-left: 20px;
                        color: #20A0FF;
                        cursor: pointer;
                    }

                    .cancel {
                        margin-left: 24px;
                        color: #666666;
                        cursor: pointer;
                        .el-icon-error {
                            color: #999;
                        }
                    }
                }

                .no-edit {
                    display: flex;
                    align-items: center;

                    .el-icon-edit {
                        margin-left: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 18px;
                        height: 18px;
                        color: #999999;

                        &:hover {
                            color: #20A0FF;
                            transition: color .2s;
                        }
                    }
                }
            }
            .sub-count, .video-count {
                display: flex;
                justify-content: center;
            }
            .status {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .option-view {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .add-sub-type {
                    width: 115px;
                    height: 50px;
                    transition: background-color .3s;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #20A0FF;
                    .el-icon-plus {
                        margin-right: 6px;
                        font-size: 16px;
                    }
                    &:hover {
                        background: #FAFAFA;
                    }
                }
                .arrow {
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .el-icon-caret-bottom {
                        color: #20A0FF;
                        font-size: 20px;
                    }
                    .right {
                        transform: rotate(-90deg);
                        transition: transform .3s;
                    }
                    .bottom {
                        transform: rotate(0deg);
                        transition: transform .3s;
                    }
                }
            }
        }

        .sub-type-wrapper {
            min-height: 134px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #E0E6F1;
            border-top: 0;
            transition: min-height .3s;
            padding: 0 32px 0 14%;
            &.empty-wrapper {
                min-height: 134px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #909399;
                font-size: 14px;
                .empty {
                    margin-left: -228px;
                }
            }

            &.collapse {
                border: 0;
                height: 0;
                min-height: 0;
                overflow: hidden;
            }

            .blank {
                height: 24px;
            }
            .sub-type-item {
                border-radius: 4px;
                height: 86px;
                margin-bottom: 24px;
                &.active {
                    background: #FAFAFA;
                }

                &:hover {
                    background: #FAFAFA;
                }
                &-content {
                    height: 86px;
                    padding: 0 32px 0 32px;
                    border: 1px solid #E0E6F1;
                    transition: background-color .3s;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 4px 4px 0 0;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 22px;
                    .col-item {
                        flex: 1;
                        &.video-count {
                            display: flex;
                            justify-content: center;
                        }
                        &.status {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }
                        &.other {
                            flex: none;
                            width: 8%;
                        }
                        &.type-name {
                            flex: none;
                            width: 40%;
                            display: flex;
                            align-items: center;
                            .edit {
                                display: flex;
                                align-items: center;
                                font-weight: 400;

                                .save {
                                    margin-left: 20px;
                                    color: #20A0FF;
                                    cursor: pointer;
                                }

                                .cancel {
                                    margin-left: 24px;
                                    color: #666666;
                                    cursor: pointer;
                                    .el-icon-error {
                                        color: #999;
                                    }
                                }
                            }

                            .no-edit {
                                display: flex;
                                align-items: center;

                                .el-icon-edit {
                                    margin-left: 10px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 18px;
                                    height: 18px;
                                    color: #999999;

                                    &:hover {
                                        color: #20A0FF;
                                        transition: color .2s;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/deep/ .el-checkbox {
    margin: 0;
    &__input.is-checked {
        .el-checkbox__inner {
            border-color: transparent;
            &::after {
                left: 5px;
                top: 2px;
            }
        }
    }
    &__inner {
        width: 16px;
        height: 16px;
        border-color: #999;
        &::after {
            left: 5px;
            top: 2px;
        }
    }
}
</style>
